<template>
  <view class="container">
    <view class="list-box">
      <view class="list-item"
            v-for="(item,index) in dataList"
            :key="index"
            @click="goDetail(item.internshipId)">
        <view class="company-logo-box">
          <image :src="staticUrl+item.bannerImage[0]"></image>
        </view>
        <view class="company-name-label">
          <view class="company-name">{{item.name}}</view>
          <view class="company-label-box">
            <view class="company-label"
                  v-for="(label,index) in item.labels"
                  :key="index">{{label}}</view>
          </view>
        </view>
        <view class="company-position-img">
          <image src="../../static/images/map.png"></image>
        </view>
        <view class="company-position">{{item.city}}</view>
        <view class="company-arrow">
          <image src="../../static/images/arrow.png"></image>
        </view>
      </view>

      <view>
        <uni-load-more :status:="uniLoadMore.status"
                       :size="16"
                       :content-text="uniLoadMore.contentText" />
      </view>
    </view>
  </view>
</template>
<script>
import { myRequest, http, staticUrl } from '../../utils'
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'

export default {
  comments: {
    uniLoadMore
  },
  data () {
    return {
      pullDownRefresh: false,
      staticUrl: staticUrl,
      uniLoadMore: {
        status: 'more',
        contentText: {
          contentdown: '加载更多',
          contentrefresh: '加载中',
          contentnomore: '到底啦'
        }
      },
      params: {
        perPage: 10,
        curPage: 1
      },
      dataList: []
    }
  },
  onLoad () {
    this.loadInternshipList()
  },
  onReachBottom () {
    if (this.uniLoadMore.status === 'more') {
      this.loadInternshipList()
    } else {
      return false
    }
  },
  methods: {
    loadInternshipList () {
      const that = this
      uni.showLoading({
        title: '数据加载中...',
        mask: true,
      });

      that.uniLoadMore.status = 'loading'
      http(
        '/internship/list',
        that.params, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          let result = res.data.data.list
          if (result.length < that.params.perPage) {
            that.uniLoadMore.status = 'noMore'
          } else {
            that.params.curPage++
            that.uniLoadMore.status = 'more'
          }
          that.dataList = that.dataList.concat(result)
          uni.hideLoading();
        }).catch(
          err => {
            console.error(err)
          })
    },
    goDetail (id) {
      uni.navigateTo({
        url: '/pages/internship_detail/internship_detail?id=' + id
      })
    }

  }
}
</script>
<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}

.list-box {
  display: flex;
  flex-direction: column;
}

.list-item {
  background-color: #ffffff;
  width: 750rpx;
  height: 200rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}

.company-logo-box {
  padding-left: 48rpx;
}

.company-logo-box image {
  width: 140rpx;
  height: 140rpx;
}

.company-name-label {
  padding-left: 30rpx;
}

.company-name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 16rpx;
}

.company-label-box {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}

.company-label {
  border-radius: 10rpx;
  border: solid 1rpx #f0430d;
  font-size: 20rpx;
  color: #f0430d;
  padding-left: 16rpx;
  padding-right: 16rpx;
  padding-top: 5rpx;
  padding-bottom: 6rpx;
  margin-right: 16rpx;
}

.company-position {
  font-size: 24rpx;
  color: #999999;
  margin-left: 10rpx;
  margin-bottom: 8rpx;
}

.company-position-img {
  padding-left: 20rpx;
}

.company-position-img image {
  width: 32rpx;
  height: 32rpx;
}

.company-arrow {
  padding-left: 50rpx;
  margin-bottom: 6rpx;
}

.company-arrow image {
  width: 24rpx;
  height: 24rpx;
}
</style>
